<template>
  <div :id="domId" style="height: 100%; width: 45%"></div>
</template>
<script>
export default {
  data() {
    return {
      capital: this.companyData,
      total: this.totalNums,
    }
  },
  props: {
    domId: {
      type: String,
      default: 'echarts1',
    },
    // 总数
    totalNums: {
      type: Number,
      default: 37,
    },
    // 数量
    companyData: {
      type: String,
      default: '0',
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    this.showEcharts1()
  },
  created() {},
  methods: {
    showEcharts1() {
      let bfbValues = parseFloat((this.capital / this.total) * 100).toFixed(2) // 计算百分比

      let myChart = this.$echarts.init(document.getElementById(this.domId))
      const color = ['rgba(13, 204, 255, 0.8)', 'rgba(209, 45, 156, 0.8)', '#FE5656'] //2个以上的series就需要用到color数组
      const color2 = ['rgba(71, 96, 255, 0.8)', 'rgba(94, 162, 239, 0.8)', '#FE5656']
      let option = {
        series: [
          {
            type: 'liquidFill',
            radius: '98%',
            center: ['50%', '50%'],
            data: [bfbValues / 100], // data个数代表波浪数
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color[this.index], // 上处的颜色
                  },
                  {
                    offset: 1,
                    color: color2[this.index], // 下处的颜色
                  },
                ],
                globalCoord: false,
              },
            ],
            backgroundStyle: {
              borderWidth: 1,
              color: '#060f39',
            },
            label: {
              normal: {
                formatter: bfbValues + '%',
                textStyle: {
                  fontSize: 16,
                  color: '#fff',
                },
              },
            },
            outline: {
              show: false,
            },
          },
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['98%', '99%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: 1,
                labelLine: {
                  show: false,
                },
                // let
                // itemStyle: {
                //   color: this.liquidColor,
                // },
              },
            ],
          },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>
